<template>
  <div class="submitinfo-body"
       v-loading="loading"
       element-loading-text="正在提交中">
    <div class="left-box"
         id="left-box">
      <el-scrollbar style="height:100%">
        <div class="title-box">
          <h1 class="title-font">
            {{this.dataProblemDetail.title?this.dataProblemDetail.title:'题目'}}
          </h1>
          时间限制: <el-tag type="info">{{this.dataProblemMain.timeLimit?this.dataProblemMain.timeLimit:'0MS'}}</el-tag>
          内存限制:<el-tag type="info">{{this.dataProblemMain.memoryLimit?this.dataProblemMain.memoryLimit:'0KB'}}</el-tag>
          <br />64位Integer的IO类型:<el-tag type="info">{{this.dataProblemMain.intFormat?this.dataProblemMain.intFormat:'-'}}</el-tag>
        </div>
        <div v-if="this.$store.getters.getIsLogin">
          <el-link v-if="this.isSolved"
                   type="success"
                   icon="el-icon-check">已解决</el-link>
          <el-link v-else
                   type="danger"
                   icon="el-icon-close">未解决</el-link>
          | <el-link type="warning"
                   v-if="this.dataProblemDetail.judgeOption===0"> 本地判题</el-link>
          <el-link type="danger"
                   v-else> 第三方判题</el-link>
          | <el-link type="danger"
                   v-if="this.dataProblemMain.spj===1">特判</el-link>
          <el-link type="success"
                   v-else>结果匹配</el-link>
        </div>
        <el-card id="problem-card"
                 class="problem-detail-card">
          <div slot="header">题目描述</div>
          <div class="detail-card-body"
               v-html="this.dataProblemMain.description?this.dataProblemMain.description:'没有描述'"></div>
        </el-card>
        <el-card id="problem-card"
                 class="problem-detail-card">
          <div slot="header">输入</div>
          <div class="detail-card-body"
               v-html="this.dataProblemMain.input?this.dataProblemMain.input:'没有输入'"></div>
        </el-card>
        <el-card id="problem-card"
                 class="problem-detail-card">
          <div slot="header">输出</div>
          <div class="detail-card-body"
               v-html="this.dataProblemMain.output?this.dataProblemMain.output:'没有输出'"></div>
        </el-card>
        <div v-for="item in this.dataProblemSamples"
             :key="item">
          <el-card id="problem-card"
                   class="problem-detail-card">
            <div slot="header">输入样例 {{item.caseOrder+1}}</div>
            <div class="detail-card-body"
                 v-html="item.inputCase?item.inputCase:'没有输入样例'"></div>
          </el-card>
          <el-card id="problem-card"
                   class="problem-detail-card">
            <div slot="header">输出样例 {{item.caseOrder+1}}</div>
            <div class="detail-card-body"
                 v-html="item.outputCase?item.outputCase:'没有输出样例'"></div>
          </el-card>
        </div>
      </el-scrollbar>
    </div>
    <div class="right-box">
          <div v-if="this.readOnly">
            <h2>未在作答时间内无法作答</h2>
          </div>
          <div class="code-editor-box"
               v-else>
            请选择语言：
            <el-select class="language-select"
                       size="medium"
                       v-model="compileLanguage"
                       @change="this.handleChangeLanguage"
                       :disabled="this.readOnly">
              <el-option v-for="item in languageType"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
            <!-- 全屏显示编辑框 -->
            <el-button icon="el-icon-full-screen"
                       type="primary"
                       size="mini"
                       round
                       plain
                       @click="fullEditor = true">全屏</el-button>
            <el-scrollbar>
            <el-dialog :visible.sync="fullEditor"
                       custom-class="dialog-body"
                       fullscreen="true">
              <aceEditor class="full-code-editor"
                         :language="this.compileLanguage"
                         :readOnly="this.readOnly"
                         :isFull="true"
                         @input="getCode"
                         :value="this.code"></aceEditor>
            </el-dialog>
            <aceEditor id="ace-editor"
                       class="code-editor"
                       :language="this.compileLanguage"
                       :readOnly="this.readOnly"
                       @input="getCode"
                       :value="this.code"></aceEditor>
            </el-scrollbar>
            <el-button type="primary"
                       @click="handleSubmit"
                       :disabled="this.readOnly">提交代码</el-button>
          </div>
    </div>
  </div>
</template>

<script>
import aceEditor from '@/components/AceEditor'
export default {
  components: {
    aceEditor
  },
  props: {
    pid: String,
    cid: String,
    readOnly: Boolean
  },
  data () {
    return {
      loading: false,
      myChartSubmit: '',
      myChartsAcUser: '',
      dataProblemMain: '',
      dataProblemDetail: '',
      dataProblemSamples: [],
      isSolved: false,
      problemIsStar: false,
      code: '',
      fullEditor: false,
      compileLanguage: 'C',
      languageType: [
        {
          value: 'C',
          label: 'C'
        },
        {
          value: 'C++',
          label: 'C++'
        },
        {
          value: 'JAVA',
          label: 'JAVA'
        }
      ],
      activeIndex: []
    }
  },
  mounted () {
    if (!this.$store.getters.getIsLogin) {
      this.activeIndex = []
      this.$notify({
        title: '提示',
        message: '登录后才能作答哦',
        type: 'warning',
        offset: 100,
        duration: 3000
      })
    } else {
      this.activeIndex.push('1')
    }
    this.getProblem()
  },
  methods: {
    handleFullScreen () {
      this.fullEditor = true
    },
    async getProblem () {
      let params = new URLSearchParams()
      params.append('problemId', this.pid)
      params.append('username', this.$store.getters.getUsername)
      let dataProblem = await this.$http.post('/problem/info', params)
      this.dataProblemDetail = dataProblem.datas[0]
      this.dataProblemMain = dataProblem.datas[1]
      this.dataProblemSamples = dataProblem.datas[2]
      this.isSolved = dataProblem.datas[3]
      if (this.dataProblemSamples.length === 0) {
        this.dataProblemSamples[0] = {
          caseOrder: 0,
          inputCase: '',
          outputCase: ''
        }
      }
    },
    async getProblem2 (pid) {
      let params = new URLSearchParams()
      params.append('problemId', pid)
      params.append('username', this.$store.getters.getUsername)
      let dataProblem = await this.$http.post('/problem/info', params)
      this.dataProblemDetail = dataProblem.datas[0]
      this.dataProblemMain = dataProblem.datas[1]
      this.dataProblemSamples = dataProblem.datas[2]
      this.isSolved = dataProblem.datas[3]
      if (this.dataProblemSamples.length === 0) {
        this.dataProblemSamples[0] = {
          caseOrder: 0,
          inputCase: '',
          outputCase: ''
        }
      }
    },
    async onSubmit () {
      let params = new URLSearchParams()
      params.append('problemId', this.pid)
      params.append('contestId', this.cid)
      params.append('username', this.$store.getters.getUsername)
      params.append('code', this.code)
      params.append('language', this.compileLanguage)
      // FIXME: 暂时固定时间和内存限制
      params.append('timeLimit', 1000)
      params.append('memoryLimit', 128000)
      // 如果有本地判题标记，优先提交到本地
      let url = '/judge_status/submit'
      if (this.dataProblemDetail.judgeOption === 1) {
        url = '/judge_status/submit'
      } else {
        // url = '/submit/submitProblem'
      }
      let dataSubmitProblem = await this.$http.post(url, params)
      this.logger.i(dataSubmitProblem.datas)
      if (dataSubmitProblem.code === 10000) {
        this.$message.success('提交成功！')
        this.loading = false
      } else {
        this.$message.error(dataSubmitProblem.msg)
      }
      this.$emit('toPane', '3')
    },
    getCode (code) {
      this.code = code
    },
    getText (text) {
      this.answerText = text
    },
    handleSubmit () {
      this.loading = true
      this.onSubmit()
    },
    handleChangeLanguage (val) {
      this.compileLanguage = val
    }
  }
}
</script>

<style scoped>
.submitinfo-body {
  width: 100%;
  margin: auto;
  margin-top: 0px;
  min-height: 700px;
  font-size: 15px;
}

/* .full-box{
    width: 100%;
} */

.left-box {
  float: left;
  text-align: left;
  width: 50%;
  height: 680px;
  margin-bottom: 30px;
}

.right-box {
  float: right;
  margin-top: 20px;
  width: 50%;
  min-height: 700px;
}

.echarts-box {
  margin: 0;
  padding: 0;
  float: left;
  height: 320px;
  width: 320px;
}

.code-editor-box {
  text-align: center;
  background-color: #eeeeee;
}

.language-select {
  margin-bottom: 10px;
  width: 20%;
  margin-right: 2%;
  z-index: 1;
}

.full-code-editor {
  width: 100%;
  height: 100%;
}

.code-editor {
  width: 100%;
  margin-bottom: 10px;
}

.title-box {
  width: 100%;
  min-height: 120px;
  text-align: center;
}

.title-font {
  font-size: 31px;
}

.el-tag {
  font-size: 14px;
  margin-right: 20px;
  margin-left: 5px;
}

.problem-detail-card {
  margin-bottom: 20px;
  margin-right: 14px;
}

.detail-card-body {
  font-size: 16px;
  margin: 0;
}

.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
